<template>
  <div class="app-container">
    <div class="header">
      <el-page-header @back="goBack" content="设备验收记录列表"></el-page-header>
    </div>

    <div class="search-container">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="设备名称">
          <el-input v-model="searchForm.equipmentName" placeholder="请输入设备名称" clearable />
        </el-form-item>
        <el-form-item label="规格/型号">
          <el-input v-model="searchForm.specificationModel" placeholder="请输入规格/型号" clearable />
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input v-model="searchForm.equipmentNumber" placeholder="请输入设备编号" clearable />
        </el-form-item>
        <el-form-item label="验收人">
          <el-input v-model="searchForm.acceptancePerson" placeholder="请输入验收人" clearable />
        </el-form-item>
        <el-form-item label="验收日期">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
      <el-button type="primary" @click="handleAdd">新增验收记录</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="equipmentName" label="设备名称"></el-table-column>
      <el-table-column prop="specificationModel" label="规格/型号"></el-table-column>
      <el-table-column prop="equipmentNumber" label="设备编号"></el-table-column>
      <el-table-column prop="acceptanceDate" label="验收日期">
        <template slot-scope="scope">
          {{ formatDate(scope.row.acceptanceDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="finalJudgment" label="验收结果"></el-table-column>
      <el-table-column prop="acceptancePerson" label="验收人"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
        <template slot-scope="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next"
      style="margin-top: 20px;">
    </el-pagination>
  </div>
</template>

<script>
import { getEquipmentAcceptanceList, deleteEquipmentAcceptance } from '@/api/equipmentAcceptance'
import { formatDate, formatDateTime } from '@/utils/date'

export default {
  name: 'SbyanshouList',
  data() {
    return {
      tableData: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchForm: {
        equipmentName: '',
        specificationModel: '',
        equipmentNumber: '',
        acceptancePerson: '',
        dateRange: []
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    formatDate,
    formatDateTime,
    async fetchData() {
      this.loading = true
      try {
        const params = {
          current: this.currentPage,
          size: this.pageSize,
          equipmentName: this.searchForm.equipmentName,
          specificationModel: this.searchForm.specificationModel,
          equipmentNumber: this.searchForm.equipmentNumber,
          acceptancePerson: this.searchForm.acceptancePerson
        }

        if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
          params.startDate = this.searchForm.dateRange[0]
          params.endDate = this.searchForm.dateRange[1]
        }

        const response = await getEquipmentAcceptanceList(params)
        this.tableData = response.data.records
        this.total = response.data.total
      } catch (error) {
        this.$message.error('获取列表失败')
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.currentPage = 1
      this.fetchData()
    },
    handleReset() {
      this.searchForm = {
        equipmentName: '',
        specificationModel: '',
        equipmentNumber: '',
        acceptancePerson: '',
        dateRange: []
      }
      this.currentPage = 1
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    handleAdd() {
      this.$router.push('/main/xingzheng/sbyanshou/sbyanshou')
    },
    handleView(row) {
      this.$router.push(`/main/xingzheng/sbyanshou/sbyanshou?id=${row.id}&type=view`)
    },
    handleEdit(row) {
      this.$router.push(`/main/xingzheng/sbyanshou/sbyanshou?id=${row.id}&type=edit`)
    },
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除该记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        const success = await deleteEquipmentAcceptance(row.id)
        if (success) {
          this.$message.success('删除成功')
          this.fetchData()
        } else {
          this.$message.error('删除失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败')
        }
      }
    },
    goBack() {
      this.$router.push('/main/xingzheng/sbyanshou/sbyanshou')
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.search-container {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style> 